<template>
  <div>
    <div>
      <a-button @click="addNew" icon="plus" type="primary" shape="round">新建</a-button>
      <a-button style="margin-left: 5px" @click="remove" icon="delete" shape="round" type="danger"
                v-show="selectRows && selectRows.length">删除
      </a-button>
      <a-button style="margin-left: 5px" @click="moveUp" icon="up" shape="round"
                v-show="selectRows && selectRows.length">上移
      </a-button>
      <a-button style="margin-left: 5px" @click="moveDown" icon="down" shape="round"
                v-show="selectRows && selectRows.length">下移
      </a-button>
    </div>
    <HTable :configurable="false" :data-source="innerButtons"
            style="margin-top: 10px" ref="table" :pagination="false"
            :columns="columns" select="multiple" @selectChange="selectChange">
      <template slot="batchButtonSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.batchButton" @click.stop="() => record.batchButton = !record.batchButton" />
      </template>
      <template slot="rowButtonSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.rowButton" @click.stop="() => record.rowButton = !record.rowButton" />
      </template>
      <template slot="showNameSlot" slot-scope="text, record, index">
        <a-input @click.stop v-model="record.showName" placeholder="请输入显示名称" />
      </template>
      <template slot="buttonTypeSlot" slot-scope="text, record, index">
        <div @click.stop>
          <a-select v-model="record.buttonType" style="min-width: 100px; width: 100%">
            <a-select-option data-role="ignore-select-field" value="default">默认</a-select-option>
            <a-select-option data-role="ignore-select-field" value="dashed">虚线</a-select-option>
            <a-select-option data-role="ignore-select-field" value="primary">主要</a-select-option>
            <a-select-option data-role="ignore-select-field" value="danger">危险</a-select-option>
            <a-select-option data-role="ignore-select-field" value="link">链接</a-select-option>
          </a-select>
        </div>
      </template>
      <template slot="buttonShapeSlot" slot-scope="text, record, index">
        <div @click.stop>
          <a-select v-model="record.buttonShape" @click.stop style="min-width: 100px; width: 100%">
            <a-select-option data-role="ignore-select-field" value="circle">circle</a-select-option>
            <a-select-option data-role="ignore-select-field" value="round">round</a-select-option>
            <a-select-option data-role="ignore-select-field" value="default">default</a-select-option>
          </a-select>
        </div>
      </template>
      <template slot="iconSlot" slot-scope="text, record, index">
        <div @click.stop>
          <IconSelector style="width: fit-content; margin: auto" v-model="record.icon" />
        </div>
      </template>
      <template slot="actionSlot" slot-scope="text, record, index">
        <div>
          <a-button icon="setting" shape="round"
                    v-show="ButtonRegistry[record.buttonComponent] && ButtonRegistry[record.buttonComponent].config"
                    @click.stop="() => openConfigModal(record)">配置
          </a-button>
        </div>
      </template>
    </HTable>

    <AddNewButtonModal @ok="handleOK" :menu="menu" :form-definition="formDefinition" ref="AddNewButtonModal" />
    <ButtonConfigModal ref="ButtonConfigModal" :form-definition="formDefinition" :menu="menu" />
  </div>
</template>
<script>
import { createModelForVue, createProps } from '@/utils'
import HTable from '@comp/hhd/HTable/HTable.vue'
import { createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import AddNewButtonModal from '@comp/hhd/design/FormMenu/button/AddNewButtonModal.vue'
import IconSelector from '@comp/hhd/design/DesignTable/IconSelector/IconSelector.vue'
import ButtonConfigModal from '@comp/hhd/design/FormMenu/button/ButtonConfigModal.vue'
import ButtonRegistry from '@comp/hhd/design/FormMenu/button/ButtonRegistry'

export default {
  name: 'FormMenuButton',
  components: { ButtonConfigModal, IconSelector, AddNewButtonModal, HTable },
  model: createModelForVue('buttons'),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    menu: createProps(Object, () => undefined),
    buttons: createProps(Array, () => undefined)
  },
  data() {
    return {
      columns,
      ButtonRegistry,
      selectRows: []
    }
  },
  methods: {
    addNew() {
      this.$refs.AddNewButtonModal.open()
    },
    handleOK(button) {
      button && button.length && this.buttons.push(...button)
    },
    moveUp() {
      if (!this.selectRows || !this.selectRows.length) return
      let indexList = []
      this.selectRows.forEach(row => {
        indexList.push(this.buttons.findIndex(r => r === row))
      })
      indexList = indexList.sort()
      if(indexList[0] <= 0) return
      indexList.forEach(index => {
        let temp = this.buttons[index]
        this.buttons[index] = this.buttons[index - 1]
        this.buttons[index - 1] = temp
      })
      this.buttons.splice(0, 0)
    },
    moveDown() {
      if (!this.selectRows || !this.selectRows.length) return
      let indexList = []
      this.selectRows.forEach(row => {
        indexList.push(this.buttons.findIndex(r => r === row))
      })
      indexList = indexList.sort().reverse()
      if(indexList[0] >= this.buttons.length - 1) return
      indexList.forEach(index => {
        let temp = this.buttons[index]
        this.buttons[index] = this.buttons[index + 1]
        this.buttons[index + 1] = temp
      })
      this.buttons.splice(0, 0)
    },
    selectChange({ selectRows }) {
      this.selectRows = selectRows
    },
    remove() {
      this.$confirm({
        title: '确认删除',
        content: '是否删除选中按钮?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          let res = this.buttons.filter(button => this.selectRows.indexOf(button) === -1)
          this.$emit('change', res)
          this.$refs.table.clearSelection()
        }
      })
    },
    openConfigModal(record) {
      this.$refs.ButtonConfigModal.setData(record)
    }
  },
  computed: {
    innerButtons: {
      get() {
        let res = this.buttons || []
        if (!this.buttons) {
          this.$emit('change', res)
        }
        return res
      },
      set(v) {
        this.$emit('change', v)
      }
    }
  }
}

const columns = [
  {
    title: '按钮名称',
    align: 'center',
    dataIndex: 'buttonName'
  },
  {
    title: '列头显示',
    align: 'center',
    dataIndex: 'batchButton',
    scopedSlots: { customRender: 'batchButtonSlot' }
  },
  {
    title: '数据行显示',
    align: 'center',
    dataIndex: 'rowButton',
    scopedSlots: { customRender: 'rowButtonSlot' }
  },
  {
    title: '显示名称',
    align: 'center',
    dataIndex: 'showName',
    scopedSlots: { customRender: 'showNameSlot' }
  },
  {
    title: '按钮类型',
    align: 'center',
    dataIndex: 'buttonType',
    scopedSlots: { customRender: 'buttonTypeSlot' }
  },
  {
    title: '按钮形状',
    align: 'center',
    dataIndex: 'buttonShape',
    scopedSlots: { customRender: 'buttonShapeSlot' }
  },
  {
    title: '图标',
    align: 'center',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'iconSlot' }
  },
  {
    title: '功能设置',
    align: 'center',
    scopedSlots: { customRender: 'actionSlot' }
  }
]
</script>